<!DOCTYPE html >
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>用户基本信息</title>
    <script th:replace="common/head::static"></script>
</head>
<body>
<!-- 一个带有 class="layui-fluid" 的容器中，那么宽度将不会固定，而是 100% 适应 -->
<div class="layui-fluid">
    <!-- 采用 layui-row 来定义行 -->
    <div class="layui-row">
        <!-- 采用类似 layui-col-md* 这样的预设类来定义一组列（column），且放在行（row）内 -->
        <div class="layui-col-md12">
            <!-- 面板 -->
            <div class="layui-card">
                <div class="layui-card-header">个人基本资料</div>
                <div class="layui-card-body">
                    <!-- 表单 -->
                    <!-- 为什么select/checkbox/radio没显示？ -->
                    <!-- https://www.layui.com/doc/base/faq.html#form -->
                    <form class="layui-form">
                        <input type="text" name="id" th:value="${sysUserVo.id}" th:hidden="true">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="username" th:value="${sysUserVo.username}" readonly
                                       class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">不可修改</div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="男" title="男">
                                <input type="radio" name="sex" value="女" title="女" checked>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline">
                                <input id="oriole_avatar" type="text" name="avatar" th:value="${sysUserVo.avatar}"
                                       class="layui-input">
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button id="oriole_avatarUpload" type="button" class="layui-btn">
                                    <i class="layui-icon">&#xe67c;</i>上传图片
                                </button>
                                <button id="oriole_avatarPreview" class="layui-btn layui-btn-primary">查看图片</button>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="submit" class="layui-btn" lay-submit="" lay-filter="updateSysUserFilter">
                                    立即提交
                                </button>
                                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/common/js/common.js}"></script>
<script>
    layui.use(['form', 'upload'], function () {
        const $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            upload = layui.upload;
        form.render();

        const $body = $('body');
        const avatarSrc = $('#oriole_avatar');

        Common.simpleUpload(upload, '#oriole_avatarUpload', '/sysFile/upload/', 'post', function (res) {
            if (res.value === 200) {
                avatarSrc.val(res.data.url);
            } else {
                layer.msg(res.message, {icon: 5});
            }
        });

        $body.on("click", "#oriole_avatarPreview", function (e) {
            const json = {
                "title": "查看头像"
                , "data": [
                    {
                        "src": ctx + '/sysFile/getByUrl?url=' + avatarSrc.val().replace(/\\/g, "//")
                    }
                ]
            }
            Common.simpleLayerPhotos(layer, json);
            return false;
        });

        form.on('submit(updateSysUserFilter)', function (obj) {
            Common.ajaxPutJSON(ctx + "/sysUser/updateProfile", JSON.stringify(obj.field), function (res) {
                if (res.value === 200) {
                    layer.msg(res.message, {icon: 1, time: 1000});
                } else {
                    layer.msg(res.message, {icon: 2, time: 2000});
                }
            })
            return false;
        });
    });
</script>
</body>
</html>